<template>
  <div v-if="dataAll" class="runtime-config">
    <Form
      :model="formState"
      style="width: 1010px"
      :label-col="{ style: { width: '210px' } }"
      :wrapper-col="{ span: 16 }"
      autocomplete="off"
      label-align="right"
      :colon="false"
    >
      <div class="server-address">
        <FormItem
          name="JE_CORE_WEBSOCKETURL"
          class="JE_CORE_WEBSOCKETURL"
          :label="$t('running.IPAddress')"
        >
          <Input v-model:value="formState.JE_CORE_WEBSOCKETURL" class="myInput" />
          <div class="text">
            <i>{{ $t('running.IPAddressTip') }}</i>
          </div>
        </FormItem>
      </div>
      <hr />
      <div class="log">
        <FormItem name="JE_SYS_LOGINFO" class="JE_SYS_LOGINFO">
          <template #label> &nbsp;{{ $t('running.log') }} </template>
          <CheckboxGroup
            v-model:value="formState.JE_SYS_LOGINFO"
            :options="plainOptions"
            class="my-checkbox"
          />
          <div class="text">
            <i>{{ $t('running.logTip') }}</i>
          </div>
        </FormItem>
      </div>
      <hr />
      <div class="content">
        <FormItem name="JE_SYS_INTERNET" class="JE_SYS_INTERNET" :label="$t('running.connect')">
          <Select
            v-model:value="formState.JE_SYS_INTERNET"
            :allow-clear="false"
            :default-value="formState.JE_SYS_INTERNET"
            :options="selectList"
            class="myInput"
          >
          </Select>
          <div class="text">
            <i>{{ $t('running.connectTip') }}</i>
          </div>
        </FormItem>

        <FormItem
          name="JE_CORE_AJAXTIMEOUT"
          class="JE_CORE_AJAXTIMEOUT"
          :label="$t('running.timeout')"
        >
          <InputNumber
            v-model:value="formState.JE_CORE_AJAXTIMEOUT"
            class="myInputNumber"
            min="0"
            :allow-clear="false"
            ><template #addonAfter> {{ $t('running.second') }} </template>
          </InputNumber>
          <div class="text">
            <i>{{ $t('running.timeTip') }}</i>
          </div>
        </FormItem>
      </div>
      <hr />
      <div class="updateSize">
        <FormItem
          name="JE_SYS_UPLOADFILESIZE"
          class="JE_SYS_UPLOADFILESIZE"
          :label="$t('running.time')"
        >
          <InputNumber
            v-model:value="formState.JE_SYS_UPLOADFILESIZE"
            class="myInputNumber"
            :allow-clear="false"
            min="0"
            ><template #addonAfter>M</template>
          </InputNumber>
          <div class="text">
            <i>{{ $t('running.sizeTip') }}</i>
          </div>
        </FormItem>
        <FormItem
          name="JE_DOCUMENT_FILE_SUFFIX"
          class="JE_DOCUMENT_FILE_SUFFIX"
          :label="$t('running.suffix')"
        >
          <InputTextArea v-model:value="formState.JE_DOCUMENT_FILE_SUFFIX" class="myInput" rows="4">
          </InputTextArea>
          <div class="text">
            <i>{{ $t('running.suffixTip') }}</i>
          </div>
        </FormItem>
      </div>
    </Form>
  </div>
</template>

<script>
  import { Form, Input, Checkbox, InputNumber, Select, Modal } from '@jecloud/ui';
  import { reactive, toRefs, onUnmounted, ref, onMounted } from 'vue';
  import VueEvent from '@/helper/model/event';
  import { useOpenDialog } from '@/hooks/index';
  import { saveConfigData } from '@/api';
  import { onScroll, scrollToTop } from '@/utils/utils.js';
  import { useI18n } from '@common/locales';

  export default {
    name: 'RuntimeConfig',
    components: {
      Form,
      FormItem: Form.Item,
      Input,
      InputTextArea: Input.TextArea,
      InputNumber: InputNumber,
      Select,
      CheckboxGroup: Checkbox.Group,
    },
    props: {
      dataAll: {
        type: Array,
        default: () => [],
      },
    },
    setup(props) {
      let formState = reactive({
        JE_CORE_WEBSOCKETURL: 'ws://47.94.2.232:7001/',
        JE_SYS_LOGINFO: 'JE_SYS_EXCEPTION,JE_SYS_LOGINLOG',
        JE_SYS_INTERNET: '',
        JE_CORE_AJAXTIMEOUT: '30',
        JE_SYS_UPLOADFILESIZE: '10',
        JE_DOCUMENT_FILE_SUFFIX: '',
      });
      let meta = {};
      let res = {};
      // 赋值
      const changeDataType = (parame) => {
        res = parame.filter((item) => {
          return item.key === 'RuntimeConfig';
        });
        res[0]?.items.find((item) => {
          formState[item.code] = item['value'];
        });
        meta = JSON.parse(JSON.stringify(formState));
      };

      const dataCallback = (data) => {
        changeDataType(data);
      };
      // 初始化值
      changeDataType(props.dataAll);

      const isChange = () => {
        return Object.keys(meta).every((item) => {
          return meta[item] === formState[item];
        });
      };
      // 保存回调
      const isSaveCallback = () => {
        if (isChange()) return changeBar();
        useOpenDialog({
          attribute: 'runtime-config',
          allFields: JSON.stringify(formState),
        });
      };
      // 修改数据
      const handleChange = (code, e) => {
        formState[code] = e;
      };
      // 多选项
      const state = reactive({
        checkedList: ['JE_SYS_EXCEPTION', 'JE_SYS_LOGINLOG'],
      });
      const I18n = useI18n().messages.zh_CN;
      const plainOptions = [
        { value: 'JE_SYS_LOGINLOG', label: I18n.running.loginLog },
        { value: 'JE_SYS_DEVELOPLOG', label: I18n.running.developLog },
        { value: 'JE_SYS_VISITLOG', label: I18n.running.executeLog },
        { value: 'JE_SYS_EXCEPTIONLOG', label: I18n.running.unusualLog },
      ];
      const selectList = ref([
        { value: '1', label: '是' },
        {
          value: '0',
          label: '否',
        },
      ]);

      // 点击保存回调
      const clickCallback = () => {
        if (!isChange()) {
          saveConfigData({
            attribute: 'runtime-config',
            allFields: JSON.stringify(formState),
            type: '',
          }).then(
            (meta = JSON.parse(JSON.stringify(formState))),
            Modal.notice('保存成功', 'success'),
            VueEvent.emit('changeAllData', { item: 'runtime-config', formState }),
          );
        } else {
          // 如果显示了子页面就不提示
          Modal.notice('无数据操作!', 'info');
        }
      };

      // 左侧菜单栏是否允许跳转
      const changeBar = () => {
        VueEvent.emit('saveResult', true);
      };

      // 回滚到顶部
      onMounted(() => {
        scrollToTop();
      });

      VueEvent.on('toolbarSaveEvent', clickCallback);
      VueEvent.on('sendData', dataCallback);
      VueEvent.on('isSave', isSaveCallback);
      VueEvent.on('fadeScroll', onScroll);
      onUnmounted(() => {
        VueEvent.off('toolbarSaveEvent', clickCallback);
        VueEvent.off('sendData', dataCallback);
        VueEvent.off('isSave', isSaveCallback);
        VueEvent.off('fadeScroll', onScroll);
      });

      return {
        ...toRefs(state),
        formState,
        plainOptions,
        selectList,
        handleChange,
      };
    },
  };
</script>

<style lang="less" scoped>
  .runtime-config {
    color: #333333;
    :deep(.my-checkbox) {
      margin-top: 2px;
    }
    .server-address {
      padding: 30px 0 10px 0;
    }
    .log {
      padding: 20px 0 10px 0;
    }
    .content {
      padding: 20px 0 10px 0;
    }
    .updateSize {
      padding: 20px 0 80px 0;
    }
  }
</style>
